<!--
 * @title: 导入excel组件
 * @params1: uploadUrl，上传url
 * @description: 用户导入组件
 * @author: donghang
 * @date: 2020-05-22 14:00:17
!-->
<template>
  <div class="tl-upload-container">
    <el-upload class="tl-upload" :action="baseUrl + uploadUrl" :headers="header" :data="postData" multiple :limit="limitCount" :file-list="fileList" :on-success="uploadSuccess" :before-upload="beforeUpload" :show-file-list="false">
      <el-button ref="importRef1" slot="default" icon="el-icon-upload2" :loading="uploadLoading" class="filter-item" type="primary" v-if="isDisplayImport">{{ btnTitle }}</el-button>
    </el-upload>
  </div>
</template>

<script>
import axios from '@tapui/utils/request'
export default {
  name: 'TlImportExcel',
  data() {
    return {
      fileList: [],
      header: {
        Authorization: 'Bearer ' + this.$store.getters.token
      },
      baseUrl: axios.defaults.baseURL,
      uploadLoading: false,
      postData: {
        tableName: this.tableName,
        projectcode: this.projectcode
      }
    }
  },
  props: {
    uploadUrl: {
      type: String,
      default: ''
    },
    limitCount: {
      type: Number,
      default: 999999
    },
    limitType: {
      type: String,
      default: 'xlsx,xls'
    },
    limitSize: {
      // 单位MB
      type: Number,
      default: 20
    },
    title: {
      type: String,
      default: '信息导入'
    },
    btnTitle: {
      type: String,
      default: '导入'
    },
    tableName: {
      type: String,
      default: ''
    },
    // 扩展往后台传输的数据
    extendData: {
      type: Object,
      default: function() {
        return {}
      }
    },
    isDisplayImport: {
      type: Boolean,
      default: true
    },
    parentId: {
      type: [Number, String],
      default: ''
    },
    projectcode: {
      type: String,
      default: ''
    }
  },
  methods: {
    /** 导入之前验证 */
    beforeUpload(file) {
      if (this.limitCount === this.fileList.length) {
        this.$tap.alert(`最多只能上传${this.limitCount}个附件!`, 'warning')
        return false
      }
      if (this.limitType) {
        let fileType = this.getFileExt(file.name)
        let isRight = false
        for (let type of this.limitType.split(';')) {
          if (type.indexOf(fileType) > -1) {
            isRight = true
            break
          }
        }
        if (!isRight) {
          this.$tap.alert(`上传附件只能是 ${this.limitType}格式!`, 'warning')
          return false
        }
      }
      if (this.limitSize > 0) {
        if (file.size / 1024 / 1024 > this.limitSize) {
          this.$tap.alert(`上传附件不能大于 ${this.limitSize}MB!`, 'warning')
          return false
        }
      }
      this.$set(this.postData, 'planid', this.parentId)
      this.uploadLoading = true
      this.$emit('beginUpload')
      return true
    },
    /** 导入成功回调 */
    uploadSuccess(response, file) {
      if (response.success) {
        this.uploadLoading = false
        this.$tap.message(response.message)
        this.$emit('refresh')
      } else {
        this.uploadLoading = false
        this.$tap.alert(response.message, 'warning')
        this.fileList = []
      }
      this.$emit('endUpload')
    },
    /** 文件扩展名 */
    getFileExt(fileName) {
      let arr = fileName.split('.')
      if (arr.length === 0) {
        return ''
      } else {
        return arr[arr.length - 1].toString().toLowerCase()
      }
    },
    close() {
      this.fileList = []
      this.extendData = {}
      this.postData = {}
    }
  },
  created() {
    this.postData = { ...this.postData, ...this.extendData }
  }
}
</script>

<style></style>
